<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Streamlined - Contact Management/CRM Template</title>

<link rel="stylesheet" media="screen" href="css/reset.css" />
<link rel="stylesheet" media="screen" href="css/grid.css" />
<link rel="stylesheet" media="screen" href="css/style.css" />
<link rel="stylesheet" media="screen" href="css/messages.css" />
<link rel="stylesheet" media="screen" href="css/forms.css" />

<!--[if lt IE 8]>
<link rel="stylesheet" media="screen" href="css/ie.css" />
<![endif]-->

<!-- jquerytools -->
<script src="js/jquery.tools.min.js"></script>

<script type="text/javascript" src="js/global.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/PIE.js"></script>
<script type="text/javascript" src="js/IE9.js"></script>
<script type="text/javascript" src="js/ie.js"></script>
<![endif]-->

<script type="text/javascript"> 
$(document).ready(function(){

/**
 * Modal Dialog Boxes Setup
 */

    var triggers = $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.7
        },

        closeOnClick: false
    });

    /* Simple Modal Box */
    var buttons1 = $("#simpledialog button").click(function(e) {
	
        // get user input
        var yes = buttons1.index(this) === 0;

        if (yes) {
            // do the processing here
        }
    });

    /* Yes/No Modal Box */
    var buttons2 = $("#yesno button").click(function(e) {
	
        // get user input
        var yes = buttons2.index(this) === 0;

        // do something with the answer
        triggers.eq(1).html("You clicked " + (yes ? "yes" : "no"));
    });

    /* User Input Prompt Modal Box */
    $("#prompt form").submit(function(e) {

        // close the overlay
        triggers.eq(2).overlay().close();

        // get user input
        var input = $("input", this).val();

        // do something with the answer
        if (input) triggers.eq(2).html(input);

        // do not submit the form
        return e.preventDefault();
    });
});
</script> 

</head>
<body>
    
    <div id="wrapper">
        <header>
            <div class="container_8 clearfix">
                <h1 class="grid_1"><a href="dashboard.html">Streamlined</a></h1>
                <nav class="grid_5">
                    <ul class="clearfix">
                        <li class="action">
                            <a href="#" class="has-popupballoon button button-blue"><span class="add"></span>New Contact</a>
                            <div class="popupballoon top">
                                <h3>Add new contact</h3>
                                First Name<br />
                                <input type="text" /><br />
                                Last Name<br />
                                <input type="text" /><br />
                                Company<br />
                                <input type="text" />
                                <hr />
                                <button class="button button-orange">Add contact</button>
                                <button class="button button-gray close">Cancel</button>
                            </div>
                        </li>
                        <li class="action">
                            <a href="#" class="has-popupballoon button button-blue"><span class="add"></span>New Task</a>
                            <div class="popupballoon top">
                                <h3>Add new task</h3>
                                <input type="text" /><br /><br />
                                When it's due?<br />
                                <input type="date" /><br />
                                What category?<br />
                                <select><option>None</option></select>
                                <hr />
                                <button class="button button-orange">Add task</button>
                                <button class="button button-gray close">Cancel</button>
                            </div>
                        </li>
                        <li><a href="dashboard.html">Dashboard</a></li>
                        <li><a href="profile.html">Profile</a></li>
                        <li class="fr"><a href="#">administrator<span class="arrow-down"></span></a>
                            <ul>
                                <li><a href="#">Account</a></li>
                                <li><a href="#">Users</a></li>
                                <li><a href="#">Groups</a></li>
                                <li><a href="#">Sign out</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <form class="grid_2">
                    <input class="full" type="text" placeholder="Search..." />
                </form>
            </div>
        </header>
        
        <section>
            <div class="container_8 clearfix">

                <!-- Sidebar -->

                <aside class="grid_1">

                    <nav class="global">
                        <ul class="clearfix">
                            <li><a class="nav-icon icon-house" href="dashboard.html">Overview</a></li>
                            <li><a class="nav-icon icon-time" href="activity.html">Latest Activity</a></li>
                            <li><a class="nav-icon icon-book" href="contacts.html"><span>2</span>Contacts</a></li>
                            <li><a class="nav-icon icon-tick" href="tasks.html"><span>1</span>Tasks</a></li>
                            <li><a class="nav-icon icon-note" href="notes.html">Notes</a></li>
                        </ul>
                    </nav>

                    <nav class="subnav recent">
                        <h4>Recent Contacts</h4>
                        <ul class="clearfix">
                            <li>
                                <a class="contact" href="profile.html"><h5>John Doe</h5><h6>Some Company LTD</h6></a>
                                <div class="tooltip left">
                                    <span class="avatar">
                                    </span>
                                    <h5>John Doe</h5>
                                    <h6>Some Company LTD</h6>
                                    <address>123 Some Street, LA</address>
                                </div>
                            </li>
                            <li>
                                <a class="contact" href="profile.html"><h5>Jane Roe</h5><h6>Other Company Inc.</h6></a>
                                <div class="tooltip left">
                                    <span class="avatar">
                                    </span>
                                    <h5>Jane Roe</h5>
                                    <h6>Other Company Inc.</h6>
                                    <address>456 Other Street, LA</address>
                                </div>
                            </li>
                        </ul>
                    </nav>

                    <nav class="subnav">
                        <h4>Style Templates</h4>
                        <ul class="clearfix">
                            <li><a href="layouts.html">Layouts</a></li>
                            <li><a href="styles.html">Styles</a></li>
                            <li class="active"><a href="forms.html">Forms</a></li>
                            <li><a href="tables.html">Tables</a></li>
                        </ul>
                    </nav>
                </aside>

                <!-- Sidebar End -->
                

                <!-- Main Section -->

                <section class="main-section grid_7">

                    <div class="main-content">
                        <header>
                            <ul class="action-buttons clearfix fr">
                                <li><a href="documentation/index.html" class="button button-gray no-text help" rel="#overlay">Help<span class="help"></span></a></li>
                            </ul>
                            <h2>
                                Form Templates
                            </h2>
                        </header>
                        <section class="container_6 clearfix">
                            <div class="grid_6">
                                <h3>Modal Dialogs</h3>
                                <hr />
                                <!-- the triggers -->
                                <p>
                                    <a class="modalInput button button-green" rel="#simpledialog">Simple Dialog</a>
                                    <a class="modalInput button button-blue" rel="#yesno">Yes or no?</a>
                                    <a class="modalInput button button-orange" rel="#prompt">User input</a>
                                </p>
                                <hr />
                            </div>

                            <form id="form" class="form grid_6">
                                <fieldset>
                                    <legend>HTML5 form with validation</legend>
                                    <label>Name <em>*</em><small>Enter your name</small></label><input type="text" name="name" required="required" />
                                    <label>Email <em>*</em><small>A valid email address</small></label><input type="email" required="required" />
                                    <label>Birthdate<small>mm/dd/yyyy</small></label><input type="date" name="date" />
                                    <label>Username <em>*</em><small>Alphanumeric (max 12 char.)</small></label><input type="text" name="username" required="required" maxlength="12" />
                                    <label>Password<small>max. 30 char.</small></label><input type="password" name="password" maxlength="30" />
                                    <label>Password check<small>Re-enter your password</small></label><input type="password" name="check" data-equals="password" maxlength="30" />
                                    <label>Website <em>*</em><small>A valid URL</small></label><input type="url" required="required" />
                                    <label>Timezone<small>Your timezone</small></label><select><option>America/Los Angeles</option><option>America/New York</option><option>Asia/Manila</option></select>
                                    <div class="action">
                                        <button class="button button-gray" type="submit"><span class="accept"></span>OK</button>
                                        <button class="button button-gray" type="reset">Reset</button>
                                    </div>
                                </fieldset>
                            </form>

                            <div class="grid_6">
                                <h3>Tabs</h3>

                                <hr />

                                <!-- the tabs -->
                                <div class="tabbed-pane">
                                    <ul class="tabs">
                                        <li><a href="#">Tab 1</a></li>
                                        <li><a href="#">Tab 2</a></li>
                                        <li><a href="#">Tab 3</a></li>
                                    </ul>

                                    <!-- tab "panes" -->
                                    <div class="panes clearfix">
                                        <section><h4>First tab content.</h4> Tab contents are called "panes"</section>
                                        <section>Second tab content</section>
                                        <section>Third tab content</section>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>

                </section>

                <!-- Main Section End -->

            </div>
            <div id="push"></div>
        </section>
    </div>
    
    <footer>
        <div id="footer-inner" class="container_8 clearfix">
            <div class="grid_8">
                <span class="fr"><a href="#">Documentation</a> | <a href="#">Feedback</a></span>Last account activity from 127.0.0.1 - <a href="#">Details</a> | &copy; 2010. All rights reserved. Theme design by VivantDesigns
            </div>
        </div>
    </footer>

    <!-- simple dialog -->
    <div class="widget modal" id="simpledialog">
        <header><h2>This is a simple modal dialog</h2></header>
        <section>
            <p>
                Are you sure you want to do this?
            </p>

            <!-- yes/no buttons -->
            <p>
                <button class="button button-blue close">Yes</button>
                <button class="button button-gray close">No</button>
            </p>
        </section>
    </div>

    <!-- yes/no dialog -->
    <div class="widget modal" id="yesno">
        <header><h2>This is a modal dialog</h2></header>
        <section>
            <p>
                You can only interact with elements that are inside this dialog.
                To close it click a button or use the ESC key.
            </p>

            <!-- yes/no buttons -->
            <p>
                <button class="button button-blue close">Yes</button>
                <button class="button button-gray close">No</button>
            </p>
        </section>
     </div>

     <!-- user input dialog -->
     <div class="widget modal" id="prompt">
         <header><h2>This is a modal dialog</h2></header>
         <section>
             <p>
                 You can only interact with elements that are inside this dialog.
                 To close it click a button or use the ESC key.
             </p>

             <!-- input form. you can press enter too -->
             <form>
                 <input type="text" />
                 <hr />
                 <button class="button button-gray" type="submit">OK</button>
                 <button class="button button-gray close" type="button">Cancel</button>
             </form>
         </section>
      </div>

</body>
</html>
